/* ==========================================================================
   Gallery

   Override styles of Gallery widget
========================================================================== */
@mixin grid-items($number, $suffix) {
    @for $i from 1 through $number {
        &.widget-gallery-#{$suffix}-#{$i} {
            grid-template-columns: repeat($i, 1fr);
        }
    }
}

@mixin grid-span($number, $type) {
    @for $i from 1 through $number {
        .widget-gallery-#{$type}-span-#{$i} {
            grid-#{$type}: span $i;
        }
    }
}

.widget-gallery {
    .widget-gallery-items {
        display: grid;
        grid-gap: $spacing-small;

        /*
         Desktop widths
         */
        @media screen and (min-width: $screen-lg) {
            @include grid-items(12, "lg");
        }

        /*
         Tablet widths
         */
        @media screen and (min-width: $screen-md) and (max-width: ($screen-lg - 1px)) {
            @include grid-items(12, "md");
        }

        /*
         Phone widths
         */
        @media screen and (max-width: ($screen-md - 1)) {
            @include grid-items(12, "sm");
        }
    }

    .widget-gallery-clickable {
        cursor: pointer;

        &:focus:not(:focus-visible) {
            outline: none;
        }

        &:focus-visible {
            outline: 1px solid $brand-primary;
            outline-offset: -1px;
        }
    }

    &:not(.widget-gallery-disable-selected-items-highlight) {
        .widget-gallery-item.widget-gallery-clickable.widget-gallery-selected {
            background: $brand-light;
        }
    }

    .infinite-loading {
        overflow: auto;
    }

    .widget-gallery-filter,
    .widget-gallery-empty,
    .widget-gallery-pagination {
        flex: 1;
    }

    /**
     Helper classes
      */
    @include grid-span(12, "column");
    @include grid-span(12, "row");
}

.widget-gallery-item-button {
    width: inherit;
}
